<template>
	<view class="floor uni-column">
		<view class="floor-name">
			{{floor.category=='future_single_martin'?'铁三角':'未知'}}下单预览
		</view>	
		<view class="floor-body">
			<view class="floor-title" v-if="floor!=null&&floor!=null">
				<view class="line" v-for="(item, index) of fmzParams" :key="index">
					<view class="martinKey">{{item.description}}</view>
					<view :class="floor.direction=='BUY_LONG'||floor.direction=='SELL_SHORT'?'martinValUp':'martinValDown'">{{item.value}}</view>
				</view>
			</view>
			<view class="uni-column">
				<view class="t-head uni-row" style="font-weight: bolder;">
					<view class="price">委托价格</view>
					<view class="num">委托张数</view>
					<view class="num" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">保证金</view>
				</view>
				<view class="t-body uni-row" style="color: #929292;" v-for="(item,index) in floor.floorOrders" :key="index" v-if="floor!=null">
					<view class="price">{{item.price}}</view>
					<view class="num">{{item.mount}}</view>
					<view class="num" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">{{item.calcMartin}}</view>
				</view>
			</view>
		</view>		
		<view class="floor-name" style="margin-top: 15rpx;" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">
			 止盈止损预览
		</view>	
		<view class="trigger" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">
			<view class="floor-header" v-if="floor!=null">
				<!-- <view class="line">
					<view class="martinKey">预估价值</view>
					<view :class="floor.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{floor.floorValue}}</view>
				</view> -->
				<view class="line">
					<view class="martinKey">预算均价</view>
					<view :class="floor.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{floor.floorAvgPrice}}</view>
				</view>
				<view class="line" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">
					<view class="martinKey">预算保证金</view>
					<view :class="floor.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{floor.margin}}</view>
				</view>
				<view class="line" v-if="floor.direction=='BUY_LONG'||floor.direction=='BUY_SHORT'">
					<view class="martinKey">预算爆仓价</view>
					<view :class="floor.direction=='BUY_LONG'?'martinValUp':'martinValDown'">{{floor.liquiPrice}}</view>
				</view>
			</view>
			<view class="uni-column" v-if="floor.triggers!=null">				
				<view class="uni-row t-head">
					<view>触发类型</view>
					<view>触发位置</view>
					<view>委托位置</view>
					<view>委托数量</view>
				</view>
				<view class="uni-row t-body" v-for="(item,index) in floor.triggers" :key="index">
					<view>{{item.triggerType=='martin_algo'?'委托':'跟随'}}{{item.triggerReason=='StopLoss'?'止损':'止盈'}}</view>
					<view>{{item.triggerPrice}}</view>
					<view>
						{{item.triggerType=='martin_algo'?item.algoPrice:item.callbackRate*100}}
						{{item.triggerType=='martin_algo'?'':'%'}}
						{{item.direction=='SELL_LONG'?'平多':'平空'}}</view>
					<view class="mount">{{item.triggerAmount}}</view>
				</view>
			</view>
			<view class="import-tips">
				风险提示: 止盈止损未参考持仓和已有挂单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			floor: null
		},
		computed: {
			fmzParams: function() {
				// if(this.floor==null||this.floor.param==null)return []
				var localParams = this.floor.params
				for (var i = 0; i < localParams.length; i++) {
					if (localParams[i].value == "null") {
						localParams.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
						i--; // 如果不减，将漏掉一个元素
					}
					if (localParams[i].name == "direction") {
						let dvalue = ''
						switch (localParams[i].value) {
							case 'BUY_LONG':
								dvalue = "开多"
								break;
							case 'BUY_SHORT':
								dvalue = "开空"
								break;
							case 'SELL_LONG':
								dvalue = "平多"
								break;
							case 'SELL_SHORT':
								dvalue = "平空"
								break;

						}
						localParams[i].value = dvalue
					}
				}
				console.log(localParams)
				return localParams
			}
		}
	}
</script>

<style>
	view {
		/* border: #000000 1px solid; */
	}

	.floor {		
		border-top: #8F8F8F 1px solid;
		display: flex;
		padding: 15rpx;
	}

	.floor-title {
		border-bottom: #000000 1px solid;		
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
	}

	.trigger {
		padding: 15rpx;		
		border: #D3D3D3 1rpx solid;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}

	.t-head view {
		flex: 1;
		font-size: 20upx;		
		font-weight: bolder;
	}

	.t-body view {
		flex: 1;
		font-size: 20upx;	
		color: #929292;
	}
	
	.import-tips {
		height: 40upx;
		font-size: 25upx;
		font-weight: bolder;
		color: #FF6B6B;
	}
	
	.floor-name{		
		font-size: 30rpx;
	}

	.floor-header {	
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		border-bottom: #000000 1px solid;	
	}

	.floor-body {
		padding: 15rpx;
		min-height: 400rpx;		
		border: #D3D3D3 1rpx solid;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}

	.line {
		height: 40rpx;
		justify-content: flex-start;
		width: 50%;
		display: flex;
		flex-direction: row;
	}
	
	.martinKey {
		font-size: 20upx;
		color: #918F8F;
		line-height: 30upx;				
	}

	.martinValUp {
		font-size: 20upx;		
		color: #00B48E;
		line-height: 30upx;
		font-weight: bold;	
		margin-left: 15rpx;
	}

	.martinValDown {
		font-size: 20upx;		
		color: #D14B64;
		line-height: 30upx;
		margin-left: 15rpx;
		font-weight: bold;
	}

	.martin-order {
		display: flex;
		width: 100%;
		flex-direction: column;	
		margin-top: 10rpx;
	}


	.pmain .item {
		position: relative;
		width: 100%;
		display: flex;
		font-size: 24upx;		
	}

	.pmain .item .price {
		display: block;
		width: 50%;
	}

	.pmain .item .num {
		display: block;
		width: 50%;
	}
</style>
